<template>
  <view>
    <u-toast ref="uToast" />
    <!-- 轮播图 -->
    <view class="mh32 mt21">
      <u-swiper :list="banner"
                height="300"
                mode="none"></u-swiper>
    </view>
    <u-grid :col="4">
      <u-grid-item>
        <u-icon name="man"
                :size="46"></u-icon>
        <view class="grid-text">图片</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="lock"
                :size="46"></u-icon>
        <view class="grid-text">锁头</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
      <u-grid-item>
        <u-icon name="hourglass"
                :size="46"></u-icon>
        <view class="grid-text">沙漏</view>
      </u-grid-item>
    </u-grid>
    <view class="mainRow mt10 ml32">
      <view class="mainHItem mr16 mainColumn"
            v-for="item in banner">
        <u-image class="fcenter mt21 iconAvt"
                 width="103"
                 height="103"
                 src="https://cdn.uviewui.com/uview/swiper/1.jpg"
                 shape="circle"></u-image>
        <view class="text30 white fcenter mt21 textw600">杨小兰</view>
      </view>
    </view>

    <view class="mainRow mh32 mainRight mt24">
      <view>更多</view>
      <img class="imgright ml5 "
           src="../../static/jinru.png" />
    </view>
    <view class="mainRow mt10 ml32">
      <view class="mainHItem1 mr16 mainColumn"
            v-for="item in data2">
        <u-image class="fcenter mt21"
                 width="330"
                 height="271"
                 src="https://cdn.uviewui.com/uview/swiper/1.jpg"></u-image>
        <view class="text26 color82  mt21 textw600">刷卡POS机消费</view>
        <view class="text24 color82  mt21 textw600">陈俊豪 2021.4.31</view>
      </view>
    </view>

    <view class="mainRow mh32 mainRight mt24">
      <view>更多</view>
      <img class="imgright ml5 "
           src="../../static/jinru.png" />
    </view>
    <view class="mainColumn mt10 ml32">
      <view class="mainHItem2 mr16 mainColumn mt10"
            v-for="item in data2">
        <u-image class="fcenter mt21"
                 width="686"
                 height="271"
                 src="https://cdn.uviewui.com/uview/swiper/1.jpg"></u-image>
        <view class="text26 color82  mt21 textw600">刷卡POS机消费</view>
        <view class="text24 color82  mt21 textw600">陈俊豪 2021.4.31</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      data1: [],
      data2: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
      ],
      list3: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
      ],
      page: 1,
      size: 10,
      hasdata: true,
      list: [],
    };
  },
  onTabItemTap(e) {
    // tab 点击时执行，此处直接接收单击事件
    console.log("54411");
  },
  onLoad() {
    this.getData();
  },
  methods: {
    //用户上拉触底事件
    onReachBottom() {
      if (!this.hasdata) {
        return;
      }
      this.page++;
      this.getList();
    },
    onPullDownRefresh() {
      this.list = [];
      this.page = 1;
      this.hasdata = true;
      this.getList();
    },
    async getList() {
      const res = await this.$myRequest({
        url: this.$appUrl.main.list,
        data: {
          page: this.page,
          size: this.size,
        },
      });
      console.log(res);
      uni.stopPullDownRefresh();
      if (res.code == 0) {
        this.list = this.list.concat(res.data);
        if (res.data.length < this.size) {
          this.hasdata = false;
        }
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
    async getData() {
      var self = this;
      this.$u.api
        .getPriurl({})
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss">
.mainHItem {
  width: 160rpx;
  height: 240rpx;
  background: #ff332d;
  border-radius: 10rpx;
}

.mainHItem1 {
  width: 328rpx;
  height: 410rpx;
  border-radius: 7rpx;
  -moz-box-shadow: 0 5rpx 5rpx #ebe5e8;
  -webkit-box-shadow: 0 5rpx 5rpx #ebe5e8;
  box-shadow: 0 5rpx 5rpx #ebe5e8;
}

.mainHItem2 {
  width: 686rpx;
  height: 420rpx;
  border-radius: 7rpx;
  -moz-box-shadow: 0 5rpx 5rpx #ebe5e8;
  -webkit-box-shadow: 0 5rpx 5rpx #ebe5e8;
  box-shadow: 0 5rpx 5rpx #ebe5e8;
}
</style>
